<template>
  <div class="bloodSugar">
    <!-- switch开关 -->
    <ul class="title">
      <li>
        <my-switch @isActive="getisActive" class="my_switch"></my-switch>
      </li>
      <li>
        <el-button type="warning" size="small" @click="openaddblood" v-if="isShow == 1"
          >添加血糖</el-button
        >
      </li>
    </ul>
    <!-- 血糖数据/出入院记录(表格) -->
    <ul class="exhibition" v-if="isActive">
      <!-- 整体数据 -->
      <li class="overall">
        <div class="item" v-for="(item, index) of overallTitle" :key="index">
          <span class="label"> {{ item.label }}: </span>
          <span>{{ totallist[item.val] }}</span>
        </div>
      </li>
      <!-- 展开数据(表格) -->
      <li class="develop">
        <v-table
          @cellClick="cellClick"
          :header="header"
          :tableList="tableData"
        ></v-table>
      </li>
    </ul>
    <ul class="records" v-else>
      <li class="records_tatal">
        <span class="label">总计: {{ recordtotal }}次</span>
      </li>
      <li>
        <v-table :header="headerRecords" :tableList="Records"></v-table>
      </li>
    </ul>
    <v-pagination
      :total="recordtotal"
      @currentPage="currentPage"
    ></v-pagination>

    <el-dialog :visible="dialogTableVisible" center>
      <el-table :data="sugarDetail" border>
        <el-table-column
          property="gluceExamtime"
          label="时间"
          align="center"
        ></el-table-column>
        <el-table-column
          align="center"
          property="gluceValue"
          label="血糖值"
        ></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close" type="danger">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// switch开关组件引入
import mySwitch from "@/components/switch/switch";
// table组件引入
import vTable from "./table";
// 引入分页组件
import vPagination from "@/components/pagination/index";
import bus from "../homepage/bus";
export default {
  data() {
    return {
      sugarDetail: [],
      dialogTableVisible: false,
      overallTitle: [
        { label: "总计", val: "total" },
        { label: "正常次数", val: "normal" },
        { label: "偏高次数", val: "high" },
        { label: "偏低次数", val: "low" },
        { label: "最高血糖", val: "max" },
        { label: "最低血糖", val: "min" },
      ],
      header: [
        {
          label: "检测时间",
          prop: "gluceExamtime",
        },
        {
          label: "空腹",
          prop: "gluceAttr0.bloodGluceValue",
        },
        {
          label: "早餐前",
          prop: "gluceAttr1.bloodGluceValue",
        },
        {
          label: "早餐后",
          prop: "gluceAttr2.bloodGluceValue",
        },
        {
          label: "午餐前",
          prop: "gluceAttr3.bloodGluceValue",
        },
        {
          label: "午餐后",
          prop: "gluceAttr4.bloodGluceValue",
        },
        {
          label: "晚餐前",
          prop: "gluceAttr5.bloodGluceValue",
        },
        {
          label: "晚餐后",
          prop: "gluceAttr6.bloodGluceValue",
        },
        {
          label: "睡前",
          prop: "gluceAttr7.bloodGluceValue",
        },
        {
          label: "凌晨",
          prop: "gluceAttr8.bloodGluceValue",
        },
        {
          label: "随机",
          prop: "gluceAttr9.bloodGluceValue",
        },
      ],
      tableData: [],
      // 测量数据总计列表
      totallist: [],
      isActive: true,
      headerRecords: [
        {
          label: "日期",
          prop: "toHospitalTime",
          formatter: (itm) => {
            return itm.outHospitalTime
              ? itm.toHospitalTime + "--" + itm.outHospitalTime
              : itm.toHospitalTime + "--";
          },
        },
        {
          label: "科室",
          prop: "departmentName",
        },
        {
          label: "住院号",
          prop: "hospitalNum",
        },
        {
          label: "责任医生",
          prop: "doctorName",
        },
        {
          label: "入院血糖",
          prop: "sugarNum",
        },
        {
          label: "出院血糖",
          prop: "outSugarNum",
        },
      ],
      Records: [],
      recordtotal: 0,
      page: 1, //当前页数
      isShow: 1,
    };
  },
  props: {
    patientID: {
      type: [String, Number],
      required: true,
    },
    // 住院号
    hospitalNum: {
      type: String,
      required: true,
    },
  },
  mounted() {
    this.getisActive(true);
    bus.$on("setisActive", (isActive) => {
      isActive && this.getallbloodsugar();
    });
    this.isShow = this.$route.query.type;
  },
  methods: {
    //关闭弹框
    close() {
      this.dialogTableVisible = false;
    },
    // 获取当前患者的所有血糖数据
    getallbloodsugar(page) {
      let data = {
        id: this.patientID,
        current: page ? page : "",
        startTime: "",
        endTime: "",
      };

      this.$api.getallbloodsugar(data).then((res) => {
        this.totallist = res.data.dataNum;
        let tableData = res.data.data;
        let list = [];
        tableData.forEach((item, index) => {
          list[index] = {};
          list[index].gluceExamtime = item.gluceExamtime;
          for (let i = 0; i < item.bloodSugarGluces.length; i++) {
            let gluceAttr = "gluceAttr" + item.bloodSugarGluces[i].gluceAttr;
            list[index][gluceAttr] = item.bloodSugarGluces[i];
          }
        });
        this.tableData = list;
      });
    },
    // 单击单元格,获取当前时间段的测量数据
    cellClick(date, type) {
      this.dialogTableVisible = true;
      let data = {
        time: date,
        attr: type,
        id: this.patientID,
      };
      this.$api
        .getDetailbloodsugar(data)
        .then((res) => {
          // console.log(res);
          this.sugarDetail = res.data.data;
        })
        .catch((err) => {
          this.sugarDetail = [];
        });
    },
    // 所有出入院记录
    hospitalRecords(page) {
      let data = {
        hospitalNum: this.hospitalNum,
        current: page ? page : "",
      };
      this.$api.hospitalRecords(data).then((res) => {
        this.Records = res.data.data;
        this.recordtotal = res.total;
      });
    },
    // switch开关的状态
    getisActive(val) {
      this.currentPage(1);
      this.isActive = val;
      if (val) {
        this.getallbloodsugar(1);
      } else {
        this.hospitalRecords(1);
      }
    },
    // 打开添加血糖弹框
    openaddblood() {
      this.$emit("addBloodVisible", true);
    },
    // 当前页码
    currentPage(page) {
      if (this.isActive) {
        this.getallbloodsugar(page);
      } else {
        this.hospitalRecords(page);
      }
    },
  },
  components: {
    mySwitch,
    vTable,
    vPagination,
  },
};
</script>

<style lang="scss" scoped>
.bloodSugar {
  .title {
    margin: 0;
    padding: 20px 26px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .my_switch {
      display: flex;
      align-items: center;
    }
  }
  .exhibition {
    padding: 0 26px;
    display: flex;
    padding-left: 48px;
    flex-wrap: wrap;
    .develop,
    .overall {
      width: 100%;
      list-style: none;
    }
    .overall {
      margin-bottom: 20px;
      display: flex;
      .item {
        margin-right: 0.5rem;
        .label {
          color: #999999;
          font-size: 16px;
          font-family: PingFang-SC-Bold, PingFang-SC;
          font-weight: 400;
        }
      }
    }
  }
  .records {
    // background-color: violet;
    list-style: none;
    padding: 0 48px;
    .records_tatal {
      color: #999999;
      font-size: 16px;
      font-family: PingFang-SC-Bold, PingFang-SC;
      font-weight: 400;
      // .label{
      //   width: #333333;
      // }
    }
  }
  & >>> .el-dialog {
    width: 30%;
  }
}
</style>